<template>
  <div class="inner-container">
	  <div class="x-header">
      <span class="navTitle">终端上传限制距离</span>
      <el-divider></el-divider>
      <el-form ref="formSearch" :model="formSearch">
        <el-row>
          <el-col :span="4">
            <el-form-item prop="name">
              <el-input
                placeholder="请输入终端上传限制距离"
                v-model="formSearch.distance"
              ></el-input>
            </el-form-item>
          </el-col>
		  <el-col :span="8">
            <el-button
              style="margin-left: 10px"
              :loading="editDistanceLoading"
              @click="handleEditDistance"
              >修改</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 查询条件 -->
    <div class="x-header">
      <span class="navTitle">终端查询</span>
      <el-divider></el-divider>
      <el-form label-width="90px" ref="formSearch" :model="formSearch">
        <el-row>
          <el-col :span="8">
            <el-form-item label="品牌名称 :" prop="name">
              <el-input
                placeholder="请输入终端品牌名称"
                v-model="formSearch.name"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="使用单位 :" prop="unit">
              <el-input
                placeholder="请输入使用单位"
                v-model="formSearch.unit"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备类型 :" prop="type">
              <el-select style="width:100%" v-model="formSearch.type">
                <el-option label="类型一" :value="1"></el-option>
                <el-option label="类型二" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="终端编号 :" prop="num">
              <el-input
                placeholder="请输入终端编号"
                v-model="formSearch.num"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态 :" prop="status">
              <el-radio-group v-model="formSearch.status">
                <el-radio-button label="">不限</el-radio-button>
                <el-radio-button label="1">可用</el-radio-button>
                <el-radio-button label="2">不可用</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-button
              type="primary"
              style="margin-left:90px"
              icon="el-icon-search"
              @click="handleQueryData"
              >查询</el-button
            >
            <el-button icon="el-icon-refresh" @click="handleReset('formSearch')"
              >重置</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 记录列表 -->
    <div class="x-record_list">
      <div class="navTitle">终端列表</div>
      <el-divider></el-divider>
      <div class="btn_list">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="handleAddEquipment"
          >新增</el-button
        >
        <el-button
          type="primary"
          plain
          icon="el-icon-share"
          @click="handleBatchStart"
          >批量启用</el-button
        >
        <el-button
          type="warning"
          plain
          icon="el-icon-circle-close"
          @click="handleBatchStop"
          >批量禁用</el-button
        >
        <el-button
          type="danger"
          icon="el-icon-delete"
          @click="handleBatchDelete"
          >批量删除</el-button
        >
      </div>
      <el-table :data="tableData" style="width:100%;min-height:150px">
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          type="index"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          label="终端品牌名称"
          prop="name"
          align="center"
        ></el-table-column>
        <el-table-column
          label="使用单位"
          prop="unit"
          align="center"
        ></el-table-column>
        <el-table-column
          label="终端设备编号类型"
          prop="type"
          align="center"
        ></el-table-column>
        <el-table-column
          label="终端设备编号"
          prop="num"
          align="center"
        ></el-table-column>
        <el-table-column
          label="终端状态"
          prop="status"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="handleTableEdite(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="primary"
              size="mini"
              @click="handleTableStart(scope.row)"
              >启用</el-button
            >
            <el-button
              type="danger"
              size="mini"
              @click="handleTableStop(scope.row)"
              >禁用</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="text-center">
        <el-pagination
          :current-page.sync="currentPage"
          :page-size="10"
          layout="prev, pager, next, jumper"
          :total="100"
          style="margin-top:20px"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 新增/编辑终端设备弹框 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="30%"
      @close="dialogClose"
    >
      <el-form
        label-width="90px"
        :model="dialogForm"
        :rules="dialogFormRules"
        ref="dialogForm"
      >
        <el-form-item label="品牌名称: " prop="name">
          <el-input
            placeholder="请输入品牌名称"
            v-model="dialogForm.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="使用单位: " prop="unit">
          <el-input
            placeholder="请输入使用单位"
            v-model="dialogForm.unit"
          ></el-input>
        </el-form-item>
        <el-form-item label="编号类型: " prop="type">
          <el-select style="width:100%" v-model="dialogForm.type">
            <el-option label="类型一" :value="1"></el-option>
            <el-option label="类型二" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备编号: " prop="num">
          <el-input
            placeholder="请输入设备编号"
            v-model="dialogForm.num"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="text-center">
        <el-button type="primary" @click="handleSubmit('dialogForm')"
          >提交</el-button
        >
        <el-button plain @click="handleResetDialog('dialogForm')"
          >重置</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { insertDistance,selectDistance } from "@/api/project/system/terminal";
export default {
  data() {
    return {
      editDistanceLoading:false,
      formSearch: {
        distance: "",
        unit: "",
        type: "",
        num: "",
        status: ""
      },
      dialogForm: {
        name: "",
        unit: "",
        type: "",
        num: ""
      },
      dialogFormRules: {
        name: [{ required: true, message: "不能为空！", trigger: "blur" }],
        unit: [{ required: true, message: "不能为空！", trigger: "blur" }],
        type: [{ required: true, message: "不能为空！", trigger: "change" }],
        num: [{ required: true, message: "不能为空！", trigger: "blur" }]
      },
      tableData: [
        {
          name: "三星Tab S2 T819",
          unit: "巴南区国土局",
          type: "机器序列号（serial）",
          num: "5665156166516516",
          status: "可用"
        },
        {
          name: "三星Tab S2 T819",
          unit: "巴南区国土局",
          type: "机器序列号（serial）",
          num: "5665156166516516",
          status: "不可用"
        },
        {
          name: "三星Tab S2 T819",
          unit: "巴南区国土局",
          type: "机器序列号（serial）",
          num: "5665156166516516",
          status: "可用"
        },
        {
          name: "三星Tab S2 T819",
          unit: "巴南区国土局",
          type: "机器序列号（serial）",
          num: "5665156166516516",
          status: "不可用"
        }
      ],
      currentPage: 1,
      dialogTitle: "终端设备-新增",
      dialogVisible: false
    };
  },
  created(){
    
  },
  mounted(){
    console.log(this.$store)
    this.getZhongduan()
  },
  methods: {
    //查询终端距离
    getZhongduan(){
      selectDistance().then(res =>{
        this.formSearch.distance = res.data
      })
    },
    //修改终端距离
    handleEditDistance(){
      this.editDistanceLoading = true
      var data={
        distance: this.formSearch.distance
      }
      insertDistance(data).then(res =>{
        this.editDistanceLoading = false
        console.log(res)
        this.$message({
          message: '修改成功！',
          type: 'success'
        });
        this.getZhongduan()
      }).catch(err =>{
        this.editDistanceLoading = false
      })
    },
    //查询
    handleQueryData: function() {},
    //重置
    handleReset: function(formName) {
      this.$refs[formName].resetFields();
    },
    //新增终端设备
    handleAddEquipment: function() {
      this.dialogVisible = true;
      this.dialogTitle = "终端设备-新增";
    },
    //批量启动
    handleBatchStart: function() {
      this.$confirm("此操作将批量启动终端设备, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(res => {
        this.$message.success("操作成功！");
      });
    },
    //批量停止
    handleBatchStop: function() {
      this.$confirm("此操作将批量禁用终端设备, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error"
      }).then(res => {
        this.$message.success("操作成功！");
      });
    },
    //批量删除
    handleBatchDelete: function() {
      this.$confirm("此操作将批量删除终端设备, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error"
      }).then(res => {
        this.$message.success("操作成功！");
      });
    },
    //单个编辑
    handleTableEdite: function(row) {
      this.dialogVisible = true;
      this.dialogTitle = "终端设备-编辑";
    },
    //单个启用
    handleTableStart: function(row) {
      this.$confirm("此操作将启动终端设备, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(res => {
        this.$message.success("操作成功！");
      });
    },
    //单个禁用
    handleTableStop: function(row) {
      this.$confirm("此操作将禁用此终端设备, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error"
      }).then(res => {
        this.$message.success("操作成功！");
      });
    },
    //提交表单
    handleSubmit: function(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.dialogVisible = false;
          this.$message.success("操作成功！");
        }
      });
    },
    //重置表单
    handleResetDialog: function(formName) {
      this.$refs[formName].resetFields();
    },
    //对话框关闭回调
    dialogClose: function() {
      this.handleResetDialog("dialogForm");
    }
  },
  created() {}
};
</script>

<style lang="scss" scoped>
.inner-container {
  padding: 20px 30px;
  background-color: #fff;
  .x-header {
    .navTitle {
      font-size: 17px;
      font-weight: bold;
      font-family: PingFangSC-Regular;
      color: rgba(72, 73, 77, 1);
      margin-bottom: 20px;
    }
  }
  .x-record_list {
    .navTitle {
      font-size: 17px;
      font-weight: bold;
      font-family: PingFangSC-Regular;
      color: rgba(72, 73, 77, 1);
      margin: 20px 0;
    }
    .btn_list {
      margin-bottom: 20px;
    }
  }
}
</style>
